<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
	<style type="text/css">
		*{
			padding:0px;
			margin: 0px;
			font-family: "微软雅黑"

		}
		li{
			list-style: none;
		}
		.list{
			margin: 100px auto;
			width: 950px;
			height: 405px;
			background: red url() 0 0 no-repeat;
		}
		.list .list_item{
			width: 100px;
			height: 405px;
			float: left;
			overflow: hidden;
			border: 0px solid #000;

		}
		.list  .other{
			width: 538px;
		}
		.list  .other img{
			float: left;
			border: 0px solid #000;
		}
	</style>
	<script type="text/javascript">

		$(function  () {

			$('.list_item').mouseover(function(event) {
					$(this).stop().animate({'width': "538px"}, 500);
						$(this).siblings().stop().animate({'width': "100px"}, 500);
				

			});

		})


	</script>

</head>
<body>
	<ul class="list">
		<li class="list_item"><img src="./1.jpg" alt=""></li>
		<li class="list_item"><img src="./2.jpg" alt=""></li>
		<li class="list_item other"><img src="./3.jpg" alt=""></li>
		<li class="list_item "><img src="./4.jpg" alt=""></li>
		<li class="list_item "><img src="./5.jpg" alt=""></li>
	</ul>
</body>
</html>